跳到主要内容

表格控件（TableWidget）

表格控件TableWidget 类为应用程序提供了一个标准的带有水平表头的表格控件。

表格控件中的项目由 TableItem 提供。

  • 可以使用 set() 方法向表格添加项目。
  • 可以通过 clear() 方法清空表格内容。
  • 表格的行数可以通过 rowCount 属性获取，列数可以通过 columnCount 属性获取。

TableItem（表格项目）​

TableItem 类表示表格控件中的一个单元格项目。

项目通常包含文本、图标或复选框。

事件​

TableWidget支持以下事件：

项目点击事件（itemClicked）​

当鼠标点击控件中的某个项目时，触发itemClicked事件，并传递被点击的项目。

项目双击事件（itemDoubleClicked）​

当鼠标双击控件中的某个项目时，触发itemDoubleClicked事件，并传递被双击的项目。

项目右键菜单事件（itemContextMenu）​

当鼠标右键点击控件中的某个项目时，触发itemContextMenu事件，并传递被右键点击的项目。

选择变化事件（selectionChanged）​

当控件的选中项发生变化时，触发selectionChanged事件。

// 监听项目点击事件
tableWidget.bind('itemClicked', (event: ItemClickEvent): void => {
    event.item as TableItem; // 点击的项目
    event.point; // 鼠标位置
});
// 监听项目双击事件
tableWidget.bind('itemDoubleClicked', (event: ItemDoubleClickEvent): void => {
    event.item as TableItem; // 双击的项目 
    event.point; // 鼠标位置
});
// 监听项目右键菜单事件
tableWidget.bind('itemContextMenu', (event: ItemContextMenuEvent): void => {
    event.item as TableItem; // 右键点击的项目
    event.point; // 鼠标位置
});
// 监听选择变化事件
tableWidget.bind('selectionChanged', (): void => {
    //选中内容发生变化
});

示例代码​

以下代码展示了如何创建一个表格控件并向其中添加内容：

const desktop = Desktop.instance();
const tableWidget = new TableWidget(desktop);
tableWidget.columnCount = 3;
tableWidget.rowCount = 10;

const headerView = tableWidget.headerView;
headerView.addItem('Column 1');
headerView.addItem('Column 2');
headerView.addItem('Column 3');

tableWidget.setColumnWidth(0, 80);
tableWidget.setColumnWidth(1, 120);
tableWidget.setColumnWidth(2, 80);
tableWidget.setItem(0, 0, 'cell-1');
tableWidget.setItem(1, 1, 'cell-2');
tableWidget.setItem(2, 2, 'cell-3');